{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static "css/login-registeration.css" %}">
    <title>心语</title>
</head>
<body>
<div class="container {% if show_register %}active{% endif %}">

    <!-- 登录界面 -->
    <div class="form-box login">
        <form action="/login/" class="login-wrapper" method="post" novalidate>
            <h1>登 录</h1>
            <div style="color: rgb(65, 63, 63); font-size:15px;">
                欢迎来到心语! 您可以通过这个界面登录到系统。
            </div>
            {% csrf_token %}
            <div class="input-box">
                <!-- 输入框1：账号/用户名 -->
                {{ loginForm.username }}
                <span style="color: red">{{ loginForm.username.errors.0 }}</span>
            </div>
            <div class="input-box">
                <!-- 输入框2：密码 -->
                {{ loginForm.password }}
                <span style="color: red">{{ loginForm.password.errors.0 }}</span>
            </div>
            <button type="submit" class="btn">登 录</button>
            <div class="tips">
                <span>没有账号？</span>
                <span class="register-click">点击注册</span>
            </div>
        </form>
    </div>

    <!-- 注册界面 -->
    <div class="form-box register">
        <form action="/register/" class="register-wrapper" method="post" novalidate>
            <h1>注 册</h1>
            <div style="color: rgb(65, 63, 63); font-size:15px;">
                欢迎来到心语! 您可以通过这个界面注册新的账户。
            </div>
            {% csrf_token %}
            <div class="input-box">
                {{ registerForm.username }}
                <span style="color: red">{{ registerForm.username.errors.0 }}</span>
            </div>
            <div class="input-box">
                {{ registerForm.password1 }}
                <span style="color: red">{{ registerForm.password1.errors.0 }}</span>
            </div>
            <div class="input-box">
                {{ registerForm.password2 }}
                <span style="color: red">{{ registerForm.password2.errors.0 }}</span>
            </div>

            <button type="submit" class="btn" onclick="window.location.href='main-page-yes.html'">注 册</button>
            <div class="tips">
                <span>已有账号？</span>
                <span class="login-click">点击登录</span>
            </div>
        </form>
    </div>

    <div class="top-box">
        <div class="top-panel top-left">
            <div class="top-tip1">Video Voice Intelligence Treatment</div>
            <div class="top-tip2">心语相伴，以智疗心，听见你的声音</div>
            <div>
                <img class="hi1" src="{% static "img/hi.png" %}" alt="">
            </div>
            <div class="top-panel top-right">
                <div class="top-tip1">Video Voice Intelligence Treatment</div>
                <div class="top-tip2">心语相伴，以智疗心，听见你的声音</div>
                <div>
                    <img class="hi2" src="{% static "img/hi2.png" %}" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{% static "js/login-registeration.js" %}"></script>
</body>

</html>